<template>
  <div class="architecture-page">
    <Header />
    
    <!-- Hero Section -->
    <section class="hero">
      <div class="container">
        <div class="hero-content">
          <h1 class="hero-title">系统架构</h1>
          <p class="hero-subtitle">
            基于现代化的技术栈，采用模块化设计，提供高性能和可靠性
          </p>
        </div>
      </div>
    </section>

    <!-- Architecture Overview -->
    <section class="architecture-overview">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">整体架构</h2>
          <p class="section-subtitle">采用分层架构设计，各模块职责清晰，便于维护和扩展</p>
        </div>
        
        <div class="architecture-diagram">
          <div class="layer application-layer">
            <h3>应用层</h3>
            <div class="components">
              <div class="component">Web UI</div>
              <div class="component">REST API</div>
              <div class="component">WebSocket</div>
            </div>
          </div>
          
          <div class="layer business-layer">
            <h3>业务层</h3>
            <div class="components">
              <div class="component">内网穿透</div>
              <div class="component">网络代理</div>
              <div class="component">流量监控</div>
              <div class="component">路由管理</div>
            </div>
          </div>
          
          <div class="layer protocol-layer">
            <h3>协议层</h3>
            <div class="components">
              <div class="component">HTTP 代理</div>
              <div class="component">SOCKS 代理</div>
              <div class="component">TCP 协议</div>
              <div class="component">自定义协议</div>
            </div>
          </div>
          
          <div class="layer communication-layer">
            <h3>通信层</h3>
            <div class="components">
              <div class="component">Netty 框架</div>
              <div class="component">心跳机制</div>
              <div class="component">连接池</div>
              <div class="component">过滤器链</div>
            </div>
          </div>
          
          <div class="layer data-layer">
            <h3>数据层</h3>
            <div class="components">
              <div class="component">MySQL</div>
              <div class="component">H2</div>
              <div class="component">Lazy ORM</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Module Architecture -->
    <section class="module-architecture">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">模块架构</h2>
          <p class="section-subtitle">松耦合的模块化设计，支持独立开发和部署</p>
        </div>
        
        <div class="modules-grid">
          <div class="module-card">
            <div class="module-header">
              <div class="module-icon">
                <el-icon><Connection /></el-icon>
              </div>
              <h3>wu-lazy-cloud-heartbeat-common</h3>
            </div>
            <p class="module-description">公共基础模块，提供接口定义、枚举常量、适配器等</p>
            <div class="module-components">
              <h4>核心组件</h4>
              <ul>
                <li>NettyMsg - 网络消息基类</li>
                <li>ChannelContext - 通道上下文</li>
                <li>ProtocolAdapter - 协议适配器</li>
                <li>NettyUtils - 工具类</li>
              </ul>
            </div>
          </div>
          
          <div class="module-card">
            <div class="module-header">
              <div class="module-icon">
                <el-icon><Server /></el-icon>
              </div>
              <h3>wu-lazy-cloud-heartbeat-server</h3>
            </div>
            <p class="module-description">服务端核心模块，提供网络服务、客户端管理、端口映射等功能</p>
            <div class="module-components">
              <h4>核心组件</h4>
              <ul>
                <li>NettyTcpServerSocketApplicationListener</li>
                <li>LazyServerPermeateServerMappingApplication</li>
                <li>NettyServerVirtualRouteApplication</li>
                <li>InitServerSocket</li>
              </ul>
            </div>
          </div>
          
          <div class="module-card">
            <div class="module-header">
              <div class="module-icon">
                <el-icon><Monitor /></el-icon>
              </div>
              <h3>wu-lazy-cloud-heartbeat-client</h3>
            </div>
            <p class="module-description">客户端核心模块，提供连接管理、本地服务、端口转发等功能</p>
            <div class="module-components">
              <h4>核心组件</h4>
              <ul>
                <li>NettyClientSocketApplicationListener</li>
                <li>LazyClientPermeateClientMappingApplication</li>
                <li>NettyClientVirtualRouteApplication</li>
                <li>LazyNettyClientApplication</li>
              </ul>
            </div>
          </div>
          
          <div class="module-card">
            <div class="module-header">
              <div class="module-icon">
                <el-icon><Share /></el-icon>
              </div>
              <h3>wu-lazy-cloud-heartbeat-protocol-proxy</h3>
            </div>
            <p class="module-description">代理协议模块，提供 HTTP 和 SOCKS 代理服务</p>
            <div class="module-components">
              <h4>核心组件</h4>
              <ul>
                <li>NettyHttpProxySocketApplicationListener</li>
                <li>NettySocketProxySocketApplicationListener</li>
                <li>NettyTcpProxyFilter</li>
                <li>HttpProxyHandler</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Data Flow -->
    <section class="data-flow">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">数据流架构</h2>
          <p class="section-subtitle">清晰的数据流向，支持高效的数据传输和处理</p>
        </div>
        
        <div class="flow-diagrams">
          <div class="flow-diagram">
            <h3>内网穿透数据流</h3>
            <div class="flow-steps">
              <div class="flow-step">
                <div class="step-icon">
                  <el-icon><User /></el-icon>
                </div>
                <div class="step-content">
                  <h4>访客请求</h4>
                  <p>外部用户连接到服务端访客端口</p>
                </div>
              </div>
              
              <div class="flow-arrow">→</div>
              
              <div class="flow-step">
                <div class="step-icon">
                  <el-icon><Server /></el-icon>
                </div>
                <div class="step-content">
                  <h4>服务端处理</h4>
                  <p>服务端创建访客通道，通过心跳通道转发数据</p>
                </div>
              </div>
              
              <div class="flow-arrow">→</div>
              
              <div class="flow-step">
                <div class="step-icon">
                  <el-icon><Monitor /></el-icon>
                </div>
                <div class="step-content">
                  <h4>客户端转发</h4>
                  <p>客户端接收数据并转发给本地服务</p>
                </div>
              </div>
              
              <div class="flow-arrow">→</div>
              
              <div class="flow-step">
                <div class="step-icon">
                  <el-icon><Connection /></el-icon>
                </div>
                <div class="step-content">
                  <h4>响应返回</h4>
                  <p>本地服务响应数据，通过心跳通道返回给访客</p>
                </div>
              </div>
            </div>
          </div>
          
          <div class="flow-diagram">
            <h3>代理数据流</h3>
            <div class="flow-steps">
              <div class="flow-step">
                <div class="step-icon">
                  <el-icon><Monitor /></el-icon>
                </div>
                <div class="step-content">
                  <h4>客户端应用</h4>
                  <p>应用程序发起代理请求</p>
                </div>
              </div>
              
              <div class="flow-arrow">→</div>
              
              <div class="flow-step">
                <div class="step-icon">
                  <el-icon><Share /></el-icon>
                </div>
                <div class="step-content">
                  <h4>代理客户端</h4>
                  <p>代理客户端接收请求并转发</p>
                </div>
              </div>
              
              <div class="flow-arrow">→</div>
              
              <div class="flow-step">
                <div class="step-icon">
                  <el-icon><Server /></el-icon>
                </div>
                <div class="step-content">
                  <h4>代理服务端</h4>
                  <p>代理服务端处理请求并访问目标服务器</p>
                </div>
              </div>
              
              <div class="flow-arrow">→</div>
              
              <div class="flow-step">
                <div class="step-icon">
                  <el-icon><Globe /></el-icon>
                </div>
                <div class="step-content">
                  <h4>目标服务器</h4>
                  <p>目标服务器处理请求并返回响应</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Technology Stack -->
    <section class="technology-stack">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">技术栈</h2>
          <p class="section-subtitle">采用现代化的技术栈，确保高性能和可靠性</p>
        </div>
        
        <div class="tech-categories">
          <div class="tech-category">
            <h3>核心框架</h3>
            <div class="tech-items">
              <div class="tech-item">
                <div class="tech-icon">
                  <el-icon><Monitor /></el-icon>
                </div>
                <div class="tech-info">
                  <h4>Spring Boot 3.5.0</h4>
                  <p>现代化的应用框架，提供快速开发和部署能力</p>
                </div>
              </div>
              
              <div class="tech-item">
                <div class="tech-icon">
                  <el-icon><Connection /></el-icon>
                </div>
                <div class="tech-info">
                  <h4>Netty</h4>
                  <p>高性能异步网络框架，支持高并发连接处理</p>
                </div>
              </div>
              
              <div class="tech-item">
                <div class="tech-icon">
                  <el-icon><Cpu /></el-icon>
                </div>
                <div class="tech-info">
                  <h4>JDK 24</h4>
                  <p>最新的 Java 开发工具包，提供优秀的性能表现</p>
                </div>
              </div>
            </div>
          </div>
          
          <div class="tech-category">
            <h3>数据存储</h3>
            <div class="tech-items">
              <div class="tech-item">
                <div class="tech-icon">
                  <el-icon><DataBase /></el-icon>
                </div>
                <div class="tech-info">
                  <h4>MySQL 8.0</h4>
                  <p>主数据库，存储配置和监控数据</p>
                </div>
              </div>
              
              <div class="tech-item">
                <div class="tech-icon">
                  <el-icon><DataBase /></el-icon>
                </div>
                <div class="tech-info">
                  <h4>H2</h4>
                  <p>开发环境数据库，轻量级嵌入式数据库</p>
                </div>
              </div>
              
              <div class="tech-item">
                <div class="tech-icon">
                  <el-icon><DataBase /></el-icon>
                </div>
                <div class="tech-info">
                  <h4>Lazy ORM</h4>
                  <p>轻量级 ORM 框架，提供类型安全的数据库操作</p>
                </div>
              </div>
            </div>
          </div>
          
          <div class="tech-category">
            <h3>部署运维</h3>
            <div class="tech-items">
              <div class="tech-item">
                <div class="tech-icon">
                  <el-icon><Box /></el-icon>
                </div>
                <div class="tech-info">
                  <h4>Docker</h4>
                  <p>容器化部署，提供一致的运行环境</p>
                </div>
              </div>
              
              <div class="tech-item">
                <div class="tech-icon">
                  <el-icon><Setting /></el-icon>
                </div>
                <div class="tech-info">
                  <h4>Maven</h4>
                  <p>构建自动化工具，管理项目依赖</p>
                </div>
              </div>
              
              <div class="tech-item">
                <div class="tech-icon">
                  <el-icon><Monitor /></el-icon>
                </div>
                <div class="tech-info">
                  <h4>Spring Boot Actuator</h4>
                  <p>应用监控和管理，提供健康检查和指标</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <Footer />
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { 
  Connection, 
  // Server,
  Monitor, 
  Share,
  User,
  // Globe,
  Cpu,
  // DataBase,
  Box,
  Setting
} from '@element-plus/icons-vue'

onMounted(() => {
  // 页面初始化逻辑
})
</script>

<style lang="scss" scoped>
.architecture-page {
  min-height: 100vh;
}

// Hero Section
.hero {
  padding: 120px 0 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-align: center;
  
  .hero-title {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 16px;
    
    @media (max-width: 768px) {
      font-size: 32px;
    }
  }
  
  .hero-subtitle {
    font-size: 18px;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
  }
}

// Section Header
.section-header {
  text-align: center;
  margin-bottom: 60px;
  
  .section-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
    
    @media (max-width: 768px) {
      font-size: 28px;
    }
  }
  
  .section-subtitle {
    font-size: 18px;
    color: var(--text-regular);
    max-width: 600px;
    margin: 0 auto;
  }
}

// Architecture Overview
.architecture-overview {
  padding: 80px 0;
  background: var(--background-color);
}

.architecture-diagram {
  max-width: 1000px;
  margin: 0 auto;
  
  .layer {
    margin-bottom: 30px;
    padding: 20px;
    border-radius: 12px;
    background: var(--background-light);
    
    h3 {
      font-size: 20px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 16px;
      text-align: center;
    }
    
    .components {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: center;
      
      .component {
        padding: 8px 16px;
        background: var(--primary-color);
        color: white;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
      }
    }
  }
  
  .application-layer {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    
    .component {
      background: rgba(255, 255, 255, 0.2);
    }
  }
  
  .business-layer {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    
    .component {
      background: rgba(255, 255, 255, 0.2);
    }
  }
  
  .protocol-layer {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
    
    .component {
      background: rgba(255, 255, 255, 0.2);
    }
  }
  
  .communication-layer {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: white;
    
    .component {
      background: rgba(255, 255, 255, 0.2);
    }
  }
  
  .data-layer {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    color: white;
    
    .component {
      background: rgba(255, 255, 255, 0.2);
    }
  }
}

// Module Architecture
.module-architecture {
  padding: 80px 0;
  background: var(--background-light);
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 30px;
}

.module-card {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: var(--shadow-light);
  transition: transform 0.3s ease;
  
  &:hover {
    transform: translateY(-4px);
  }
  
  .module-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    
    .module-icon {
      width: 50px;
      height: 50px;
      background: var(--primary-color);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .el-icon {
        font-size: 24px;
        color: white;
      }
    }
    
    h3 {
      font-size: 18px;
      font-weight: 600;
      color: var(--text-primary);
    }
  }
  
  .module-description {
    color: var(--text-regular);
    line-height: 1.6;
    margin-bottom: 20px;
  }
  
  .module-components {
    h4 {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 12px;
    }
    
    ul {
      list-style: none;
      
      li {
        color: var(--text-regular);
        margin-bottom: 6px;
        position: relative;
        padding-left: 16px;
        
        &::before {
          content: '•';
          position: absolute;
          left: 0;
          color: var(--primary-color);
          font-weight: bold;
        }
      }
    }
  }
}

// Data Flow
.data-flow {
  padding: 80px 0;
  background: var(--background-color);
}

.flow-diagrams {
  max-width: 1200px;
  margin: 0 auto;
}

.flow-diagram {
  margin-bottom: 60px;
  
  h3 {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 30px;
    text-align: center;
  }
}

.flow-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  
  .flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 200px;
    
    .step-icon {
      width: 60px;
      height: 60px;
      background: var(--primary-color);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
      
      .el-icon {
        font-size: 24px;
        color: white;
      }
    }
    
    .step-content {
      h4 {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 8px;
      }
      
      p {
        font-size: 14px;
        color: var(--text-regular);
        line-height: 1.4;
      }
    }
  }
  
  .flow-arrow {
    font-size: 24px;
    color: var(--primary-color);
    font-weight: bold;
    
    @media (max-width: 768px) {
      transform: rotate(90deg);
    }
  }
}

// Technology Stack
.technology-stack {
  padding: 80px 0;
  background: var(--background-light);
}

.tech-categories {
  max-width: 1200px;
  margin: 0 auto;
}

.tech-category {
  margin-bottom: 60px;
  
  h3 {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 30px;
    text-align: center;
  }
}

.tech-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
}

.tech-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: var(--shadow-light);
  
  .tech-icon {
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    
    .el-icon {
      font-size: 24px;
      color: white;
    }
  }
  
  .tech-info {
    h4 {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 4px;
    }
    
    p {
      font-size: 14px;
      color: var(--text-regular);
      line-height: 1.4;
    }
  }
}
</style> 